<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--  User: 黄星
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线考试系统</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/common.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/page/admin/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript">

        window.onresize = function () {
            launchFullscreen(document.documentElement);
        };

        window.onload = function () {
            layer.msg('刷新页面将自动提交成绩', {icon: 1, time: 3000});
        };

        window.onbeforeunload = function () {
            autoExamSubmit();
            window_close();
            return false;
        };

        //屏蔽右键
        document.oncontextmenu = function () {
            return false;
        };
        //屏蔽一些按键
        document.onkeydown = function (e) {
            var k = window.event.keyCode;

            if (window.event.keyCode == 27) {
                window.event.keyCode = 0;
                window.event.returnValue = false;
            }

            if (k == 116)//屏蔽 F5 刷新键
            {
                window.event.keyCode = 0;
                window.event.returnValue = false;
            }
            if (k == 27) {
                return false;
            }
            if (window.event.ctrlKey && k == 82)//Ctrl + R
                window.event.returnValue = false;
            if (window.event.ctrlKey && k == 78)//屏蔽Ctrl+n
                window.event.returnValue = false;
            if (window.event.ctrlKey && k == 87)//屏蔽Ctrl+w
                window.event.returnValue = false;
            if (event.shiftKey && k == 121)//屏蔽 shift+F10
                window.event.returnValue = false;
            if (k == 122)//屏蔽 shift+F10
                window.event.returnValue = false;

            if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
                window.event.returnValue = false;//屏蔽 shift 加鼠标左键新开一网页
            if (window.event.altKey && k == 115)//屏蔽Alt+F4
            {
                return false;
            }
            if (window.event.altKey &&
                (k == 37 || //屏蔽 Alt+方向键 ←
                    k == 39)) //屏蔽 Alt+ 方向键→
            {
                event.returnValue = false;
            }

        };

        function window_close() {
            if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) {
                location.replace("about:blank");
                window.close();
            } else {
                window.opener = null;
                window.open(" ", "_self");
                window.close();

            }
        }

        //全屏，开始考试

        var scrollTime = null;
        function starExam() {
            $("#clue").css("display", "none");
            $("#exam").css("display", "block");
            $("#fullbtn").css("display", "none");
            launchFullscreen(document.documentElement);
            scrollTime = window.setInterval("nextTime()", 500);
        }

        //屏幕计时变化事件
        function nextTime() {
            var time = document.getElementById("showTime").innerHTML;
            document.getElementById("showTime").innerHTML = timeChange(time.trim());
        }
        //判断浏览器类型调用全屏函数
        function launchFullscreen(element) {

            if (element.requestFullscreencreen) {
                element.requestFullScreen()
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen()
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen()
            } else if (element.msRequestFullScreen) {
                element.msRequestFullScreen()
            }
        }

        //计时器时间的变化
        function timeChange(str) {

            var times = [];
            times = str.split(":");
            var hour = times[0];
            var minute = times[1];
            var second = times[2];
            var ret = "";

            if (hour <= 0 && minute <= 0 && second <= 0) {
                ret = "考试结束";
                window.clearInterval(scrollTime);
                autoExamSubmit();
            } else {
                if (second > 0) {
                    //如果秒大于1  ， 则秒减1
                    second--;
                } else {
                    //秒等于0，分减1, 还要先判断分是否为 0
                    if (minute == 0) {
                        //分为0， 时减1，分变为59 ，秒变为59；
                        hour--;
                        minute = 59;
                        second = 59;
                    } else {
                        //分减1，秒变为59
                        minute--;
                        second = 59;
                    }
                }
                if (second < 10) {
                    second = "0" + second;
                }
                ret = hour + ":" + minute + ":" + second;
            }
            return ret;
        }

        //手动提交
        function manualExamSubmit() {
            $("#show").contents().find("#manualFinish").click();
        }

        //自动提交，按钮是隐藏的
        function autoExamSubmit() {
            $("#show").contents().find("#autoFinish").click();
        }
    </script>
</head>
<body>
<!--页面提示，让用户点击全屏的-->
<from id="clue">
    <div style="border: 3px groove yellowgreen;border-radius:10px;width: 50%;margin-left: 23%;margin-top: 10%;text-align: center">
        <b style="color: red;font-size: 30px;"><strong>注&nbsp;&nbsp;&nbsp;&nbsp;意</strong></b><br/><br/>
        <b style="font-size: 20px;">
            本场考试将全程进行教室与网络的监控<br/><br/>
            请各位考生遵守考场规则！！<br/><br/>
            如经发现&nbsp;&nbsp;&nbsp;将按校规处罚<br/><br/></b>
        <input id="fullbtn" type="button" value="开始考试" onclick="starExam();">
    </div>
</from>
<form id="exam" style="display: none;">
    <!-- basename为不带properties扩展名的文件名；var为存储该配置文件的变量名 -->
    <fmt:setBundle basename="question" var="questionNumber"/>
    <!-- key为配置文件中的属性名；var为存储该配置值的变量名；bundle为上一步中存储配置文件的变量名 -->
    <fmt:message key="choice.number" var="choiceNumber" bundle="${questionNumber}"/>
    <fmt:message key="blank.number" var="blankNumber" bundle="${questionNumber}"/>
    <fmt:message key="judge.number" var="judgeNumber" bundle="${questionNumber}"/>
    <%--以上是用来获取properties文件的值--%>
    <div class="clearfix main_page">
        <%--头部盒子，用来显示用户信息之类的--%>
        <div class="left main_head">
            <%--显示学生照片--%>
            <div class="left main_studentimg">
                <img style="width: 100%;height: 100%;"
                     src="${pageContext.request.contextPath}/static/img/studentImg.jpg">
            </div>
            <%--显示学生信息--%>
            <div class="left main_studentinfor">
                <table style="width: 100%;height: 100%;">
                    <tr class="main_tr_style">
                        <td class="main_td_left">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</td>
                        <td>${student.sno}</td>
                    </tr>

                    <tr class="main_tr_style">
                        <td class="main_td_left">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
                        <td>${student.studentName}</td>
                    </tr>

                    <tr class="main_tr_style">
                        <td class="main_td_left">专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</td>
                        <td>${student.classes.major.majorName}</td>
                    </tr>

                    <tr class="main_tr_style">
                        <td class="main_td_left">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</td>
                        <td>${student.classes.classesName}</td>
                    </tr>

                    <tr class="main_tr_style">
                        <td class="main_td_left">考试科目：</td>
                        <td>
                            ${subjectName}
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <%--显示侧边提示框--%>
        <div class="main_time right" style="display: table-cell;">
            <div class="left" style="width: 100%;text-align: center;font-size: 20px;border-bottom: 1px solid black">
                <b>倒计时</b>
            </div>
            <%--显示时间--%>
            <div id="showTime" class="left"
                 style="text-align: center;width: 100%;border-bottom: 1px solid black;font-size: 25px;">
                1:30:00
            </div>
            <%--显示提示--%>
            <div class="left" style="text-align: center;font-size: 15px;border-bottom: 1px solid black;">
                本场考试共有<br/>
                ${choiceNumber}道选择题<br/>
                ${blankNumber}道选择题<br/>
                ${judgeNumber}道选择题<br/>
                请再规定时间内完成题目并检查你的答案<br/>
                <b style="color: red">超过时间将自动提交试卷</b><br/>
                <b style="color: red">请勿刷新，刷新将会提交试卷</b>
            </div>
            <div class="left" style="width: 100%;text-align: center;">
                <%--提交按钮，手动显示，自动隐藏，调用js方法--%>
                <input type="button" value="交卷" onclick="manualExamSubmit()">
                <input type="button" value="自动提交" onclick="autoExamSubmit()" style="display: none">
            </div>
        </div>

        <%--中部盒子，放置侧边栏以及题目部分--%>
        <div class="left main_middle">
            <%-- 侧边栏，用于显示题目序列--%>
            <div class="left main_sidebar">
                <%--显示选择题--%>
                <div class="left question_list">
                    <div class="left" style="width:100%; text-align: center">    <%--显示题目类型--%>
                        <b style="font-size: 20px;">选择题</b>
                    </div>
                    <div class="left" style="width: 100%;">   <%-- 序号的包装盒子--%>
                        <c:forEach items="${ sessionScope.choiceQuestion}" var="cq" varStatus="vs">
                            <div class="left"
                                 style="border: 1px solid black;width: 10%;height: 23px;margin-left: 7%;font-size: 15px;text-align: center;margin-top: 3%;"> <%--显示顺序号--%>
                                <a target="show"
                                   href="${pageContext.request.contextPath}/Index/question#choice${vs.count}">${vs.count}</a> <%--跳转题号及下标--%>
                            </div>
                            <c:if test="${vs.count % 5 == 0 ? true : false}">    <%--每5个换行一次--%>
                                <br/>
                            </c:if>
                        </c:forEach>

                    </div>
                </div>

                <%--显示填空题--%>
                <div class="left question_list">
                    <div class="left" style="width:100%; text-align: center">    <%--显示题目类型--%>
                        <b style="font-size: 20px;">填空题</b>
                    </div>
                    <div class="left" style="width: 100%;">   <%-- 序号的包装盒子--%>
                        <c:forEach items="${sessionScope.blankQuestion}" var="bq" varStatus="vs">
                            <div class="left"
                                 style="border: 1px solid black;width: 10%;height: 23px;margin-left: 7%;font-size: 15px;text-align: center;margin-top: 3%;"> <%--显示顺序号--%>
                                <a target="show"
                                   href="${pageContext.request.contextPath}/Index/question#blank${vs.count}">${vs.count}</a> <%--跳转题号及下标--%>
                            </div>
                            <c:if test="${vs.count % 5 == 0 ? true : false}">    <%--每5个换行一次--%>
                                <br/>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <%--显示判断题--%>
                <div class="left question_list">
                    <div class="left" style="width:100%; text-align: center">    <%--显示题目类型--%>
                        <b style="font-size: 20px;">判断题</b>
                    </div>
                    <div class="left" style="width: 100%;">   <%-- 序号的包装盒子--%>
                        <c:forEach items="${sessionScope.judgeQuestion}" var="jq" varStatus="vs">
                            <div class="left"
                                 style="border: 1px solid black;width: 10%;height: 23px;margin-left: 7%;font-size: 15px;text-align: center;margin-top: 3%;"> <%--显示顺序号--%>
                                <a target="show"
                                   href="${pageContext.request.contextPath}/Index/question#judge${vs.count}">${vs.count}</a> <%--跳转题号及下标--%>
                            </div>
                            <c:if test="${vs.count % 5 == 0 ? true : false}">    <%--每5个换行一次--%>
                                <br/>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>


            </div>
            <%--显示题目总界面--%>
            <div class="left main_question">
                <iframe id="show" name="show" height="100%" width="100%" frameborder="0"
                        src="${pageContext.request.contextPath}/Index/question"></iframe>
            </div>
        </div>

    </div>
</form>
</body>
</html>
